import MyModal from "@/components/MyModal";
import { DftStatusEnum } from "@/constants/enum";
import { addDftRecords } from "@/services/dft";
import { getFloorList } from "@/services/floor/floor";
import { getRoomList } from "@/services/room/room";
import { getDftUserList } from "@/services/systemStaff/systemStaff";
import { objToArr } from "@/utils";
import { useBoolean, useRequest } from "ahooks";
import { DatePicker, Form, Select, message } from "antd";

export default ({ open, close, refresh }) => {
  const [form] = Form.useForm();
  const [loading, { toggle: toggleLoading }] = useBoolean(false);
  const { data: floorList } = useRequest(getFloorList);
  const { data: dftUserList } = useRequest(getDftUserList);
  const { data: roomList, run: getRoom } = useRequest(getRoomList, {
    manual: true,
  });
  const status = Form.useWatch("disinfectingStatus", form);
  const onOk = async () => {
    const values = await form.validateFields();
    if (values.disinfectingTime) {
      values.disinfectingTime = values.disinfectingTime.format(
        "YYYY-MM-DD HH:mm:ss"
      );
    }
    delete values.floorId;
    toggleLoading();
    try {
      await addDftRecords({ ...values });
      message.success("新增成功");
      close();
      refresh();
    } finally {
      toggleLoading();
    }
  };

  return (
    <MyModal
      title={"新增打扫客房记录"}
      open={open}
      close={close}
      onOk={onOk}
      confirmLoading={loading}
    >
      <Form form={form} wrapperCol={{ span: 24 }} layout="vertical">
        <Form.Item
          name="disinfectorId"
          label="清洁人员"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select
            options={dftUserList}
            fieldNames={{
              label: "realName",
              value: "sysStaffId",
            }}
            placeholder="请选择"
          />
        </Form.Item>
        <Form.Item
          name="floorId"
          label="楼层"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select
            onChange={(v) => {
              getRoom(v);
            }}
            options={floorList}
            fieldNames={{
              label: "floorName",
              value: "floorId",
            }}
            placeholder="请选择"
          />
        </Form.Item>
        <Form.Item
          name="roomId"
          label="房间"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select
            options={roomList}
            fieldNames={{
              label: "roomNum",
              value: "roomId",
            }}
            placeholder="请选择"
          />
        </Form.Item>
        <Form.Item
          name="disinfectingStatus"
          label="打扫状态"
          rules={[
            {
              required: true,
            },
          ]}
          initialValue={1}
        >
          <Select
            options={objToArr(DftStatusEnum)}
            fieldNames={{
              label: "value",
              value: "key",
            }}
            placeholder="请选择"
          />
        </Form.Item>
        {status === 1 && (
          <Form.Item
            name="disinfectingTime"
            label="打扫时间"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <DatePicker showTime />
          </Form.Item>
        )}
      </Form>
    </MyModal>
  );
};
